Destructuring Props in Functional Components

When you pass any props to any componenet, as in this example passing name and age as props to Profile component

<Profile name="John Doe" age={30} />

then you can use destructuring to directly extract name and age from the props object in the Profile component.

It makes the code cleaner and more readable by avoiding repetitive props.name and props.age references.

const Profile = ({ name, age }) => (
  <div>
    <h1>{name}</h1>
    <p>Age: {age}</p>
  </div>
);

You Might Also Like

How to Use Error Boundaries to Handle Errors

## 1. Define an ErrorBoundary class component ``` class ErrorBoundary extends React.Component { //...

Learn More
Default Props for Components

This code sets a default value for the text prop in the Button component. If no text prop is provide...

Learn More